<!DOCTYPE html> 
<html class="html"> 
	<head> 

		<title>Jammap</title>

		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
		<!-- Google Maps configuration -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
		
		<!-- jplayer skin css -->
		<link href="js/jplayer/skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
		<!-- CSS (Draggable/transparent box; canvas map, body and html configurations) -->
		<link href="css/css.css" rel="stylesheet" type="text/css" />
		
		<!-- Maps scripts -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
		<script type="text/javascript" src="js/cassioso/local.js"></script> 
		<!-- Jamendo scripts -->
		<script type="text/javascript" src="js/cassioso/jamendoHelp.js"></script> 
		<!-- JSON script -->
		<script type="text/javascript" src="js/json_sans_eval.js"></script>
		<!-- Jplayer scripts -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/jplayer/jquery.jplayer.min.js"></script>

	</head> 

	<body onload="initializeMap('default_position')" class="body"> 
		<div id="map_canvas" class="map_canvas"></div> 
		
		<div id="jquery_jplayer"></div>

		<div class="box"> 
			<div class="jp-playlist-player">
				<div id="jplayer_playlist" class="jp-playlist">
					<ul>
						<!-- The function displayPlayList() uses this unordered list -->
						<li></li>
					</ul>
				</div>
			</div>
		</div> 
		
		<div class="jp-playlist-player controls">
			<div class="jp-interface">
				<ul class="jp-controls">
					<li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
					<li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
					<li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li>
					<li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
					<li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
					<li><a href="#" id="jplayer_previous" class="jp-previous" tabindex="1">previous</a></li>
					<li><a href="#" id="jplayer_next" class="jp-next" tabindex="1">next</a></li>
				</ul>
				<div class="jp-progress">
					<div id="jplayer_load_bar" class="jp-load-bar">
						<div id="jplayer_play_bar" class="jp-play-bar"></div>
					</div>
				</div>
				<div id="jplayer_volume_bar" class="jp-volume-bar">
					<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
				</div>
				<div id="jplayer_play_time" class="jp-play-time"></div>
				<div id="jplayer_total_time" class="jp-total-time"></div>
			</div>
		</div>
		
		<form name="frm" id="frm" action="index.html" method="post" onsubmit="">
			<input type="hidden" name="strLocal" />
		</form>
	</body> 
	
	<!-- Page functions -->
	<script type="text/javascript">
		// Map related variables
		var map;
		var geocoder = new google.maps.Geocoder();
		
		// Music track list
		var myPlayList = [];
		
		function initializeMap(latLng) {
			
			alert('initializeMap with ' + latLng);
			
			if(latLng='default_position'){
				latLng = new google.maps.LatLng(-12.9833333, -38.5166667);
				$("frm").strLocal.value = latLng;
			}else{
				alert($("frm").strLocal.value);
			}

			var myOptions = {
				zoom: 3,
				center: latLng,
				navigationControl: false,
				scaleControl: false,
				mapTypeControl: false,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}

			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

			geocoder.geocode({'latLng': latLng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[1]) {
						var marker = new google.maps.Marker({
							map: map, 
							position: latLng,
							draggable: true
						});

						google.maps.event.addListener(marker, 'dragend', function() {
							alert('opa primeiro !' + marker.getPosition());
							loadPointsAndPlayer(marker.getPosition());
						});
					}
				} else {
					alert("Geocoder failed due to: " + status);
				}
			}
			
			);
		}
		
		// Map related section
		function loadPointsAndPlayer(latLng, long_name, short_name){

			alert('loadPointsAndPlayer ' + marker.getPosition());
			
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			geocoder = new google.maps.Geocoder();

			geocoder.geocode({'latLng': latLng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[1]) {
						var marker = new google.maps.Marker({
							map: map, 
							position: latLng,
							draggable: true
						});

						google.maps.event.addListener(marker, 'dragend', function() {
							alert('on event - ' + marker.getPosition());
							loadPointsAndPlayer(marker.getPosition());
						});
					}
				} else {
					alert("Geocoder failed due to: " + status);
				}
			});

			var myOptions = {
				zoom: 3,
				center: latLng,
				navigationControl: false,
				scaleControl: false,
				mapTypeControl: false,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}

			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

			alert(long_name + ' - ' + short_name);
		
			// request track, album, artist and location infos from jamendo
			var urlRequest = 'http://api.jamendo.com/get2/' +			// jamendo site
				'track_id+track_name+track_url+track_stream+' +			// track info
				'album_name+album_url+' + 								// album info
				'artist_name+artist_url+artist_image+artist_genre+' +	// artist info
				'location_country+location_city/' +						// location info
				'artist/' +												// about artist unit
				'json/' +												// in json format <www.json.org>
				'track_album+album_artist/' +							// join track, album and artist units
				'?n=20&'+												// some tracks
				'order=listened&' +										// in descedent rating order
				'location_country=' + USA + '&' +						// location condition
				'streamencoding=ogg2'									// filetype ogg
			;
			
			alert(urlRequest);
			
			var myJson = requestFromUrl(urlRequest);
			var myJsonObj = jsonParse(myJson);
			var obj;
			for (var k in myJsonObj) {
				obj = myJsonObj[k];
				var infoDiv = '<div name="divinfopanel" '+
					'id="div_' + obj.track_id + '" "class="infopanel">' +
						'Artist: <a href="' + obj.artist_url + '" target="new">' + obj.artist_name + '</a>' +
						'<br/ >' + 
						'Album: <a href="' + obj.album_url + '" target="new">' + obj.album_name + '</a>' +
						'<br/ >' + 
						'Track: <a href="' + obj.track_url + '" target="new">' + obj.track_name + '</a>' +
						'<br/ >' + 
						'Place: ' + obj.location_city + ', ' + getCountryFromAbrev(obj.location_country) +
						'<br/ >' +
						'Genre: ' + obj.genre +
						'<br/ >' + 
						'<img src="' + obj.artist_image + '"/ >' +
					'</div>'
				;
				var strLocal = obj.location_city + ', ' + getCountryFromAbrev(obj.location_country);

				markPoint(strLocal, infoDiv);

				// Adding elements to the playerlist
				myPlayList.push({name:obj.track_name,mp3:"",ogg:obj.track_stream});
			}

		}
		
		function markPoint(strLocal, cont){
			
			var infowindow = new google.maps.InfoWindow({
				content: cont
			});

			geocoder.geocode( { 'address': strLocal}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
						map: map, 
						position: results[0].geometry.location,
						icon: 'img/logo_menor.gif'
					});

					google.maps.event.addListener(marker, 'click', function() {
						infowindow.open(map, marker);
					});
				}
			});
		}
		
		// Player relatet functinos		 
		$(document).ready(function(){
			var playItem = 0;

			// Local copy of jQuery selectors, for performance.
			var jpPlayTime = $("#jplayer_play_time");
			var jpTotalTime = $("#jplayer_total_time");

			$("#jquery_jplayer").jPlayer({
				ready: function() {
					displayPlayList();
					playListInit(true); // Parameter is a boolean for autoplay.
				},
				oggSupport: true
			})
			.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
				jpPlayTime.text($.jPlayer.convertTime(playedTime));
				jpTotalTime.text($.jPlayer.convertTime(totalTime));
			})
			.jPlayer("onSoundComplete", function() {
				playListNext();
			});

			$("#jplayer_previous").click( function() {
				playListPrev();
				$(this).blur();
				return false;
			});

			$("#jplayer_next").click( function() {
				playListNext();
				$(this).blur();
				return false;
			});

			function displayPlayList() {
				$("#jplayer_playlist ul").empty();
				for (i=0; i < myPlayList.length; i++) {
					var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
					listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
					$("#jplayer_playlist ul").append(listItem);
					$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
						var index = $(this).data("index");
						if (playItem != index) {
							playListChange( index );
						} else {
							$("#jquery_jplayer").jPlayer("play");
						}
						$(this).blur();
						return false;
					});
				}
			}

			function playListInit(autoplay) {
				if(autoplay) {
					playListChange( playItem );
				} else {
					playListConfig( playItem );
				}
			}

			function playListConfig( index ) {
				$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
				$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
				playItem = index;
				$("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
			}

			function playListChange( index ) {
				playListConfig( index );
				$("#jquery_jplayer").jPlayer("play");
			}

			function playListNext() {
				var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
				playListChange( index );
			}

			function playListPrev() {
				var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
				playListChange( index );
			}
		});
		
	</script> 	
</html> 

